<template>
	<div class="bos">
		<Top :subscript="1"></Top>
		<div class="boss">
			<!-- 版心区域 -->
			<div class="center">
				<!-- 访谈和电视总区域 -->

				<div class="top">
					<!-- 文字区域 -->
					<div class="icon">
						<div class="tu">
							<img
							src="../../../assets/back.png"
							alt=""
							
							@click="back"
						/>
						</div>
						<div class="title">
							访&nbsp;谈
						</div>
					</div> 
					<div
						class="wen"
						v-for="(item, index) in list"
						:key="index"
						@click="medium(item.interviewtypeId)"
					>
					<div class="left">
							<div class="yuan" 
								:class="['zhong', index==  1  ? 'backactive' : '']"
								>
								</div>
							</div>
						<div
							class="le"
							:class="['le', index == 1 ? 'active' : '']"
						>
							{{ item.interviewtypeName }}
						</div>
					</div>
				</div>

				<!-- 底部区域 -->
				<div class="bottom">
					<div
						class="small"
						v-for="(item, index) in title"
						:key="index"
						@click="interdetail(item.interviewTitle)"
					>
						<!-- 原点区域 -->
						<div class="left">{{ index + 1 }}.</div>
						<!-- 内容区域 -->
						<div class="right">
							{{ item.interviewTitle }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
  
  <script>
import Top from "@/components/Home/TopPage.vue"
import { interviewTypeNam, interviewType } from "@/api/index"
export default {
	data() {
		return {
			list: [],
			title: [],

		}
	},
	components: {
		Top
	},
	mounted() {
		//查看访谈类型(媒体和电视)
		interviewTypeNam().then((res) => {
			if (res.data.code == 200) {
				this.list = res.data.rows
				// console.log(res.data.rows);
			}
		})
		//访谈(电视)的标题
		interviewType(this.$route.query.i).then((res) => {
			// console.log(res);
			if (res.data.code == 200) {
				this.title = res.data.rows
				// console.log(res.data.rows);
			}
		})
	},
	methods: {
		//访谈跳详情
		interdetail(id) {
			// console.log(id);
			this.$router.push({ path: "/intertwo/interdetail", query: { id } })
		},
		//跳转到媒体页面
		medium(i) {
			if (i == "xxmkaod") {
				this.$router.push({ path: "/medinm", query: { i } })
			} else if (i == 'djiajda') {
				this.$router.push({ name: "interthree" })
			}
		},
		// 返回
		back() {
			this.$router.go("-1")
		}
	}



}
  </script>
  
  <style scoped>
/* 整体区域 */
.boss {
	width: 100%;
	height: 3rem;
	display: flex;
	justify-content: center;
	margin-top: 0.05rem;
}
/* 下划线的设置 */

/* 版心区域 */
.center {
	width: 98%;
	height: 3rem;
	/* background-color: rebeccapurple; */
}
/* 访谈和电视总区域 */
.top {
	width: 100%;
	min-height: 0.6rem;
}
.wen {
	width: 100%;
	height: 50%;
	display: flex;
}
.icon {
	width: 100%;
	height: 0.3rem;
	display: flex;
	align-items: center;	
}
.tu img {
	width: 0.11rem;
	padding-top: .04rem;
}
.xiao .left {
	width: 5%;
	height: .3rem;
  
}
 .yuan{
	width: .18rem;
	height: .18rem;
	border-radius: 50%;
	background-color:black;
	margin-top: .06rem;
}
.title{
	width: 100%;
	text-align: center;
	line-height: .3rem;
	font-weight: 700;
	font-size: .22rem;
}
.le {
	width: 93%;
	height: 100%;
	line-height: 0.34rem;
	font-size: 0.18rem;
	padding-left: 0.05rem;
}
.ri {
	width: 7%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ri img {
	width: 0.2rem;
	height: 0.24rem;
}
/* 底部区域 */
.bottom {
	width: 100%;
	margin-top: 0.1rem;
}
.small {
	width: 100%;
	height: 0.2rem;
	display: flex;
	margin-top: 0.03rem;
	margin-bottom: 0.07rem;
}
/* 原点区域 */
.left {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	 padding-top: 0.01rem;
}

/* 内容区域 */
.right {
	width: 94%;
	height: 100%;
	padding-left: 0.05rem;
	font-weight: 700;
}
</style>